<script lang="ts" setup>   
import { reactive } from 'vue';
import { doLogin }  from "../../api/login";
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
interface FormState {
    username: string;
    password: string;
}
const formState = reactive<FormState>({
  username: '',
  password: '',
});
const router = useRouter();
const onFinish = (values: Admin) => {
  console.log('提交参数:', values);
  doLogin(values).then((res) => {
    console.log(res);
    console.log("请求的code==" + res.code);
    if(res.code == "DFT.0011"){
      sessionStorage.setItem("token", "res.data.token");
      message.success("登录成功");
      console.log("登录成功");
      router.push("/home");
    }else{
      message.error(res.messsage);
      console.log("登录失败");
      
    }
  });
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

</script> 

<template>
  <div class="content-main ">
    <a-form
    class="login-form"
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="用户名"
      name="username"
      :rules="[{ required: true, message: '请输入用户名！' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
    </a-form>
  </div>   

  </template>

<style lang="less">
.content-main {
  background-color: #f5f5f5;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
.login-form{
  padding-top: 80px;
  border-radius: 10px;
  position: absolute;
  // background-color: white;
  width: 400px;
  height: 300px;  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
</style>